<template>
  <div class="home">
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <router-link v-for="(item,index) in foot" :key="index" :to="`/home/${item.path}`">
        <van-icon :name="item.meta.icon" />
        <b>{{item.meta.title}}</b>
      </router-link>
    </footer>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      foot: [
        {
          path: "home",
          name: "Home",
          meta: {
            title: "首页",
            icon: "point-gift-o",
          },
        },
        {
          path: "find",
          name: "Find",
          meta: {
            title: "找房",
            icon: "point-gift-o",
          },
        },
        {
          path: "send",
          name: "Send",
          meta: {
            title: "发布",
            icon: "point-gift-o",
          },
        },
        {
          path: "message",
          name: "Message",
          meta: {
            title: "信息",
            icon: "point-gift-o",
          },
        },
        {
          path: "my",
          name: "My",
          meta: {
            title: "我的",
            icon: "point-gift-o",
          },
        },
      ],
    };
  },
};
</script>
<style lang="scss">
*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
html,body,#app,.home{
  width: 100%;
  height: 100%;
}
a{
  text-decoration: none;
}
.home{
  display: flex;
  flex-direction: column;
  main{
    flex: 1;
    overflow-y:scroll ;
  }
  footer{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #ccc;
    a{
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .router-link-active{
      color: red;
    }
  }
}
</style>